@extends('layouts.back_stage')
@section('content')
    <style>
        .shopBg{background:#fff;overflow: hidden;margin:20px 0 10px 0;}
        .tableBg{padding:30px;background:#fff;margin-top:30px;overflow: hidden;}
        .input-item{width:200px;padding-right: 0;margin-right:10px;}
        .pagination-box{text-align: center;box-sizing:border-box;margin-top:20px;}
        .touching{float:right;margin-right:30px;}
    </style>
    <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">单店配货</h3></div>
        <div class="page-body">
            <div class="row app" id="guanLi">
                <el-button type="primary" class="touching" size="small" @click="showModel">添加配货单</el-button>
                <div class="col-md-12 row row-table-box">
                    <div class="shopBg">
                        <div class="row" style="margin-top:10px;padding:9px 30px;background:#fff;">
                            <label>商品条码：</label>
                            <el-input v-model="code" class="input-item" placeholder="请输入商品条码" size="small" prefix-icon="el-icon-search" clearable></el-input>
                            <div style="display:inline-block;padding:10px 0;">
                                <label>创建时间：</label>
                                <el-date-picker v-model="getDatas" @change="getTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small"></el-date-picker>
                                <el-button type="primary" size="small" @click="grabble('reset')">搜索</el-button>
                                <el-button type="primary" @click="resetFrom()" size="small">重置</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="tableBg">
                        <el-table :data="tableInfo" size="mini" border style="width: 100%;" @filter-change="filterChange">
                            <el-table-column prop="loop" label="序号" width="50" :resizable='false'></el-table-column>
                            <el-table-column prop="shop_name" label="店铺名称" width="160" :resizable='false' column-key="shop_name" :filters="shopArr"></el-table-column>
                            <el-table-column prop="user_name" label="创建人" :resizable='false'></el-table-column>
                            <el-table-column prop="created_at" label="创建时间" width="160" :resizable='false'></el-table-column>
                            <el-table-column prop="assembly_num" label="流水线号" :resizable='false'></el-table-column>
                            <el-table-column prop="over_num" label="已配件数" :resizable='false'></el-table-column>
                            <el-table-column prop="status" label="订单状态" width="120" :resizable='false' column-key="status" :filters="[{ text: '正在配货', value: '0' }, { text: '配货完成', value: '1' }, { text: '已发货', value: '2' }, { text: '已收货', value: '3' }]">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.status===0" style="color:#7266ba;">正在配货</span>
                                    <span v-if="scope.row.status===1" style="color:#1c84c6;">配货完成</span>
                                    <span v-if="scope.row.status===2" style="color:#1aad1a;">已发货</span>
                                    <span v-if="scope.row.status===3" style="color:#23b7e5;">已收货</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="express_num" label="快递单号" :resizable='false'></el-table-column>
                            <el-table-column prop="remark" label="备注" :resizable='false'></el-table-column>
                            <el-table-column label="操作" width="100">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.status===0">
                                        <el-button  type="text" size="small" @click="peiCode(scope)">配货</el-button>
                                    </div>
                                    <div v-if="scope.row.status===1">
                                        <el-button type="text" size="small" @click="sendCode(scope)">发货</el-button>
                                        <el-button type="text" size="small" @click="lookCode(scope)">查看</el-button>
                                    </div>
                                    <div v-if="scope.row.status===2 || scope.row.status===3">
                                        <el-button type="text" size="small" @click="lookCode(scope)">查看</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination-box"><el-pagination :page-size="10" @current-change="changePageSkip" :current-page="currentPage" :total="total" layout="prev, pager, next" background></el-pagination></div>
                    </div>
                </div>
                <el-dialog title="添加配货单信息" :visible.sync="showBox" class="add-box" width="30%">
                    <el-form :model="addAct">
                        <el-form-item label="配货店铺" label-width="100px">
                            <el-select v-model="addAct.shop" filterable placeholder="请选择店铺(必)" @change="changeValue" size="small" class="panType" style="width:95%">
                                <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="流水线号" label-width="100px">
                            <el-select v-model="addAct.line" filterable placeholder="请选择流水线(必)" size="small" class="panType" style="width:95%">
                                <el-option v-for="item in lineNums" :key="item.id" :label="item.val" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="showBox = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="sureBtn" size="small">确 定</el-button>
                    </div>
                </el-dialog>
                <el-dialog title="快递信息" :visible.sync="expressBox" class="add-box" width="30%">
                    <el-form :model="expressAct">
                        <el-form-item label="快递单号" label-width="100px">
                            <el-input v-model="expressAct.express" class="input-item" placeholder="请输快递单号" size="small" clearable style="width:95%;"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="expressBox = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="expressBtn" size="small">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#guanLi',
            data:{
                shopArr:[],//店铺
                code:'',//条码
                getDatas:'', //起止时间
                created_at:'', //起止时间存储变量
                shop_id:'',//店铺
                status:'',//状态

                tableInfo:[], //表单数据
                total:1,  //table总条数
                currentPage:1, //table当前页数

                showBox:false,//添加弹框显示隐藏
                shopText:'',//店铺名
                addAct:{
                    shop:'',//店铺
                    line:'',//流水线
                },
                options:[],//店铺
                lineNums:[],//流水线
                expressBox:false,//快递信息隐藏
                expressId:'',//发货id
                expressAct:{
                    express:'',//快递单号
                },
            },
            mounted(){
                this.grabble();
                this.baseIn();
            },
            methods:{
                /*店铺下拉框*/
                baseIn(){
                    var that=this;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'get',
                        url: '/picking/get-shop-list',
                        data: {},
                        success: function (data) {
                            if(data.result.success){
                                var st1=[];
                                for(var value of data.content){
                                    st1.push({
                                        'text':value.name,
                                        'value':value.id,
                                    })
                                }
                                var st2=[];
                                for(let x=1;x<101;x++){
                                    st2.push({
                                        'id':x,
                                        'val':x,
                                    })
                                }
                                that.lineNums=st2;
                                that.shopArr=st1;
                                that.options=st1;
                            }else{
                                that.$notify.error({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                });
                            }
                        }
                    });
                },
                //获取数据
                grabble(type){
                    var that = this;
                    let skip;
                    if(type == 'reset'){
                        skip = 0;
                    }else{
                        skip = that.currentPage-1;
                    }
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        type: 'get',
                        url: '/picking/get-bill-of-goods',
                        data: {
                            skip:skip,
                            code:that.code,
                            created_at:that.created_at,
                            shop_id:that.shop_id,
                            status:that.status,
                        },
                        success: function (data) {
                            //console.log(data);
                            if(data.result.success){
                                var opt=[];
                                let i = 0;
                                for(var value of data.content.order){
                                    i++;
                                    opt.push({
                                        'id':value.id,
                                        'loop':i+(10*skip),
                                        'shop_name':value.shop_name,
                                        'user_name':value.user_name,
                                        'created_at':value.created_at,
                                        'assembly_num':value.assembly_num,
                                        'over_num':value.over_num,
                                        'status':value.status,
                                        'express_num':value.express_num,
                                        'remark':value.comment,
                                    })
                                }
                                that.tableInfo = opt;
                                that.currentPage = data.content.skip;
                                that.total = data.content.count;
                            }else{
                                that.$notify({
                                    title: '提示',
                                    message: data.result.errorMsg,
                                    duration: 0
                                });
                            }
                        }
                    });
                },
                /*添加*/
                showModel(){
                    this.showBox = true;
                    this.addAct.shop='';
                    this.addAct.line='';
                },
                /*改变选值*/
                changeValue(val){
                    let obj = {};
                    obj = this.options.find((item)=>{
                        return item.value === val;
                    });
                    this.shopText = obj.text;
                },
                /*点击确定*/
                sureBtn(){
                    var that = this;
                    if(that.addAct.shop==''){
                        this.$notify.error({
                            title: '提示',
                            message: '请选择配货店铺',
                        });
                        return false;
                    }
                    if(that.addAct.line==''){
                        this.$notify.error({
                            title: '提示',
                            message: '请选择流水线号',
                        });
                        return false;
                    }
                    $.ajax({
                        url: '/picking/increase-bill-order',
                        type: 'post',
                        data: {
                            shop_id:that.addAct.shop,
                            shop_name:that.shopText,
                            assembly_num:that.addAct.line,
                        },
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        dataType: 'json',
                        success:function(res){
                            if(res.result.success){
                                that.$notify.success({
                                    title: '提示',
                                    message: '添加成功',
                                });
                                that.grabble();
                                that.showBox = false;
                            }else{
                                that.$notify.error({
                                    title: '错误',
                                    message: res.result.errorMsg
                                });
                            }
                        }
                    })
                },
                /*配货*/
                peiCode(scope){
                    window.location.href='/picking/dispersion-code-details/'+scope.row.id;
                },
                /*查看*/
                lookCode(scope){
                    window.location.href='/picking/dispersion-code-details/'+scope.row.id;
                },
                /*发货*/
                sendCode(scope){
                    this.expressId=scope.row.id;
                    this.expressBox = true;
                    this.expressAct.express='';
                },
                /*发货确定*/
                expressBtn(){
                    var that = this;
                    if(that.expressAct.express==''){
                        this.$notify.error({
                            title: '提示',
                            message: '请填写快递单号',
                        });
                        return false;
                    }
                    $.ajax({
                        url: '/picking/deliver-goods',
                        type: 'post',
                        data: {
                            order_id:that.expressId,
                            express_num:that.expressAct.express,
                        },
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        dataType: 'json',
                        success:function(res){
                            if(res.result.success){
                                that.$notify.success({
                                    title: '提示',
                                    message: '发货成功',
                                });
                                that.grabble();
                                that.expressBox = false;
                            }else{
                                that.$notify.error({
                                    title: '错误',
                                    message: res.result.errorMsg
                                });
                            }
                        }
                    })
                },
                getTime(date){
                    if(date==null){
                        this.getDatas='';
                        this.created_at ='';
                    }else{
                        this.getDatas=date;
                        this.created_at =date[0]+' - '+date[1];
                    }
                },
                /*重置*/
                resetFrom(){
                    this.code='';
                    this.getDatas='';
                    this.created_at='';
                    this.shop_id='';
                    this.status='';
                    this.grabble('reset')
                },
                changePageSkip(val){
                    //console.log(`当前页: ${val}`);
                    this.currentPage = val;
                    this.grabble();
                },
                /*状态搜索*/
                filterChange(filters){
                    console.log(filters)
                    if(filters.status!=undefined){
                        var fil=filters.status;
                        var stas1='';
                        for(let d=0;d<fil.length; d++){
                            stas1=stas1+fil[d]+',';
                        }
                        this.status=stas1.substr(0, stas1.length - 1);
                        this.grabble('reset');
                    }
                    if(filters.shop_name!=undefined){
                        var fil=filters.shop_name;
                        var stas2='';
                        for(let d=0;d<fil.length; d++){
                            stas2=stas2+fil[d]+',';
                        }
                        this.shop_id=stas2.substr(0, stas2.length - 1);
                        this.grabble('reset');
                    }
                },
            }
        });
    </script>
@endsection